<template>
	<view :class="themeName">
		<view>
			<image style="width: 100%; background-color: #fff" :src="msg.shop.image" mode=""></image>
			<view class="boxes">
				<view class="back bold md">门店：{{ msg.shop.name?msg.shop.name:'' }}</view>
				<view class="back md m-t-30">地址：{{ msg.shop.address?msg.shop.address:'' }}</view>
				<view class="flex m-t-30">
					<text class="md">选择：</text>
					<text style="flex: 1" class="md black">
						<text v-if="!timenum">请点击下方选择时间</text>
						<text v-else>{{ timenum }}分钟</text>
					</text>
				</view>
				<view class="back contbox">
					<view @click="getchange(index)" class="b1 md" v-for="(item,index) in chooseList" :key="index">{{item}}</view>
				</view>
			</view>
		</view>
		<view @click="submit" class="other-button m-t-40" hover-class="other-button-hover">立即下单</view>
	</view>
</template>

<script>
import { jqrInfo } from '@/api/others.js';
export default {
	data() {
		return {
			id: '',
			msg: {
				shop: {}
			},
			chooseList: [],
			timenum: '', //服务时间
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.getinfo();
	},
	methods: {
		getinfo() {
			jqrInfo({ id: this.id }).then((res) => {
				this.msg = res;
				this.chooseList = res.time;
			});
		},
		getchange(index) {
			this.timenum = this.chooseList[index];
		},
		submit() {
			if (!this.timenum) {
				uni.showToast({
					title: '请选择服务时间',
					icon: 'none'
				});
				return;
			}
			// const timestamp = Math.round(new Date().getTime()/1000).toString();;
			// console.log(timestamp);
			uni.setStorageSync('jqrdevicename', this.msg.sn);
			uni.reLaunch({
				url:'/others/pages/control/control?id='+'dianzhang'+'&type=3'+'&time='+this.timenum
			})
			// return
			// uni.reLaunch({
			// 	url:
			// 		'/others/pages/getopen/getopen?id=daocheng' +
			// 		'&UUID=' +
			// 		this.msg.uuid +
			// 		'&deviceId=' +
			// 		this.msg.deviceid +
			// 		'&chargeId=' +
			// 		timestamp +
			// 		'&minute=' +
			// 		this.timenum
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		padding: 0;
	}
.boxes {
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	
	.contbox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		
		.b1{
			width: 31%;
			margin: 20rpx 1%;
			text-align: center;
			background: #4280ed;
			color: #fff;
			padding: 15rpx 0;
			border-radius: 10rpx;
			
			&:nth-child(1) {
				background: #0190ff;
			}
			&:nth-child(2) {
				background: #10b9c4;
			}
			&:nth-child(3) {
				background: #ff01cc;
			}
			&:nth-child(4) {
				background: #01c6f0;
			}
			&:nth-child(5) {
				background: #01ffe4;
			}
			&:nth-child(6) {
				background: #ffa801;
			}
			&:nth-child(7) {
				background: #01f0ff;
			}
			&:nth-child(8) {
				background: #c001ff;
			}
			&:nth-child(9) {
				background: #01ffa2;
			}
		}
	}
	
}
</style>
